<template>
  <div class="article">
    <!-- 头部 -->
    <mt-header title="约苗" class="mt-header">
      <mt-button icon="more" slot="right" @click="showShare = true"></mt-button>
        <router-link :to="`/${dizhi}`" slot="left">
          <mt-button icon="back" @click="dzBtn"></mt-button>
        </router-link>
    </mt-header>
    <!-- 分享 -->
        <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        lock-scroll
        />
    <!-- 消息 -->
    <van-notice-bar
      left-icon="volume-o"
      text="人人接种新冠疫苗，切断病毒传播链条。接种新冠疫苗，是切断新冠疫苗传播有效方法。"
    />
    <!-- 标题头 -->
    <van-row class="title" type="flex" justify="space-around">
      <van-col span="3">
        <van-image
          round
          width="5rem"
          height="5rem"
          :src="arr.image"
        />
      </van-col>
      <van-col span="13">
        <div class="title_1">{{arr.title}}</div>
      </van-col>
      <!-- 主体内容区域 -->
      <div class="wenzhang">
        <div class="small_title">
        {{arr.titleone}}
        </div>
        <div>
        {{arr.nrone}}
        </div>
        <div class="image_1">
          <van-image
              style="width:100%;margin:10px 0;"
              fit="contain"
              :src="arr.photo"
            />
        </div>
        {{arr.nrtwo}}
        <div class="small_title">
        {{arr.source}}
        </div>
        <!-- 评价 -->
        <div class="pingjia">您的评价追着我们进步</div>
        <van-rate style="margin-top:5px;margin-bottom:10px" v-model="value" />
        <!-- 留言 -->
        <van-field
          v-model="message"
          rows="2"
          autosize
          label="意见反馈"
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
        >
        <template #button>
          <van-button @click="onBtn" size="small" type="primary">提交</van-button>
        </template>
        </van-field>
      </div>
    </van-row>
   
  </div>
</template>



<script>
//组件封装
import Choujiang from '../components/Choujiang.vue'

export default {
  components:{Choujiang},
  data() {
    return {
      //  返回不同的页面
      dizhi:'',
      value: 3,
      message: '',
      // 分享本网站   
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
      arr:{}
    }
  },
  methods: {
    //  根据不同的id的值不同返回到不同的页面
    dzBtn(){
      let params =  this.$route.query.id;
      if(params>5){
        this.dizhi = 'kepu';
      }else{
        this.dizhi = '';
      }
    },
    onBtn(){
      let param = `fankui=${this.message}`;
      if(this.message!=='' && this.message.split(" ").join("").length !== 0){
        this.axios.post('/article',param).then(results=>{
          if(results.data.code==200){
            this.$toast.success('反馈成功！');
            this.message=''
          }
        })
      }else{
        this.$toast.success('亲!不能为空');
      }
    }
  },
  mounted(){
    let id = this.$route.query.id
    //console.log(id);
    // 发送axios请求
    let url = `/article?id=${id}`
    this.axios.get(url).then(results=>{
      //console.log(results)
      //存入data
      this.arr = results.data.results;
    })
  },
}
</script>



<style scoped>
.article .mt-header{
  background-color: #4fc08d;
}
.article  .title{
  margin-top: 1rem;
}
.article  .title_1{
  font-family: '微软雅黑';
  font-weight: bolder;
  margin-top: 1em;
}
/* .article {
    background-image: linear-gradient(#e66465, #9198e5);
} */
.article  .wenzhang{
  margin: 1em 1em 1em 1em;
  font-family:  "微软雅黑";
  color: rgb(24, 1, 1);
}
.wenzhang .small_title{
  font-weight: bolder;
}
.wenzhang .pingjia{
  margin-top: 2rem;
  font-weight: bolder;
}
</style>
